<template>
  <div class="addUnit">
    <div class="addUnit_main">
      <el-form :inline="true"
               status-icon
               :model="formInline"
               :rules="rules"
               ref="formInline"
               class="demo-form-inline">
        <div>
          <el-form-item label="登录页名称">
            <el-input v-model="formInline.login_name"
                      placeholder="请输入登陆页名称"
                      class="name-input">
            </el-input>
          </el-form-item>
        </div>
        <el-form-item label="单位名称"
                      prop="name">
          <el-input v-model="formInline.name"
                    placeholder="请输入单位名称"
                    class="name-input">
          </el-input>
        </el-form-item>
        <div>
          <el-form-item label="平台页面名称">
            <el-input v-model="formInline.platform_name"
                      placeholder="请输入平台页面名称"
                      class="name-input">
            </el-input>
          </el-form-item>
        </div>
        <el-form-item label="单位简称"
                      class="unit"
                      prop="nick_name">
          <el-input v-model="formInline.nick_name"
                    placeholder="请输入单位简称"
                    class="name-input"></el-input>
        </el-form-item>
        <el-form-item label="单位类型"
                      class="nick-item"
                      prop="company_type"
                      id="unitType">
          <el-select v-model="formInline.company_type"
                     placeholder="请选择单位类型"
                     @change="onChangeType">
            <el-option v-for="item in unitTypeArr"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
          <!-- <el-input v-model="formInline.nick_name"
                    placeholder="请输入单位简称"
                    class="nick-name"></el-input> -->
        </el-form-item>
        <el-form-item prop="company_business_type"
                      label="业务类型"
                      class="nick-item">
          <el-select v-model="formInline.company_business_type"
                     clearable
                     placeholder="请选择业务类型">
            <el-option v-for="item in businessType"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="formInline.company_business_type === '1'||formInline.company_business_type === '3' "
                      class="nick-item"
                      label-width="80px"
                      label="监管级别">
          <el-select v-model="formInline.regulatory_level"
                     placeholder="请选择监管级别">
            <el-option v-for="item in superviseArr"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="域名配置"
                      prop="domain_name">
          <el-input v-model="formInline.domain_name"
                    placeholder="请输入域名配置"
                    class="domain-input"></el-input>
        </el-form-item>
        <el-form-item label="单位logo"
                      class="addPadding unit">
          <el-upload class="avatar-uploader"
                     action=""
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :http-request="uploadFile"
                     name="pic_file_apk"
                     accept=".png,.jpg">
            <img v-if="imageUrl"
                 :src="imageUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <div>
          <el-form-item label="logo是否显示">
            <el-radio-group v-model="formInline.show_logo_status">
              <el-radio :label="1">显示</el-radio>
              <el-radio :label="0">不显示</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <el-form-item label="首页图片"
                      class="addPadding logo-item">
          <el-upload class="avatar-uploader"
                     action=""
                     :show-file-list="false"
                     :on-success="handleAvatarHomeSuccess"
                     :http-request="uploadHomeFile"
                     name="pic_file_apk"
                     accept=".png,.jpg">
            <img v-if="homeImageUrl"
                 :src="homeImageUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <br>
        <el-form-item label="单位地址"
                      prop="province">
          <el-select v-model="formInline.province"
                     placeholder="请选择省"
                     @change="getCity(formInline.province)"
                     class="address-select">
            <el-option v-for="item in province"
                       :key="item.value"
                       :label="item.province"
                       :value="item.province_no">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="city">
          <el-select v-model="formInline.city"
                     placeholder="请选择市"
                     @change="getArea(formInline.city)"
                     class="address-select">
            <el-option v-for="item in city"
                       :key="item.value"
                       :label="item.city"
                       :value="item.city_no">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="district">
          <el-select v-model="formInline.district"
                     placeholder="请选择区"
                     @change="changeArea(formInline.district)"
                     class="address-select">
            <el-option v-for="item in district"
                       :key="item.value"
                       :label="item.area"
                       :value="item.area_no">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="address">
          <el-input v-model="formInline.address"
                    class="address-input"></el-input>
        </el-form-item>
        <el-form-item v-if="false"
                      label='具体地址'
                      class="addPadding unit">
          <el-input v-model="address"
                    disabled
                    placeholder="请选择"
                    class="domain-input"></el-input>
        </el-form-item>
        <el-form-item label='单位邮箱'
                      class="addPadding unit">
          <el-input v-model="formInline.email"
                    placeholder="请输入邮箱"
                    class="domain-input"></el-input>
        </el-form-item>
        <el-form-item label='负责人名称'
                      class="principal addPadding">
          <el-input v-model="formInline.lead"
                    placeholder="请输入负责人名称"
                    class="lead-input"></el-input>
        </el-form-item>
        <el-form-item label='负责人电话'>
          <el-input v-model="formInline.lead_phone"
                    placeholder="请输入负责人电话"
                    class="phone-input"></el-input>
        </el-form-item>
        <el-form-item label='法人姓名'
                      class="addPadding unit">
          <el-input v-model="formInline.legal_person"
                    placeholder="请输入法人姓名"
                    class="lead-input"></el-input>
        </el-form-item>
        <el-form-item label='证件类型'
                      class="addPadding">
          <el-select v-model="formInline.certificates_type"
                     placeholder="请选择证件类型"
                     class="lead-input">
            <el-option v-for="item in cardData"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='证件号码'>
          <el-input v-model="formInline.certificates_num"
                    placeholder="请输入证件号码"
                    class="num-input"></el-input>
        </el-form-item>
        <el-form-item label='统一社会信用代码'
                      class="Credit_Code addPadding unit">
          <el-input v-model="formInline.license_num"
                    placeholder="请输入统一社会信用代码"
                    class="domain-input"></el-input>
        </el-form-item>
        <el-form-item label="营业执照"
                      class="addPadding unit">
          <el-upload class="avatar-uploader"
                     action=""
                     :show-file-list="false"
                     :on-success="unitAvatarSuccess"
                     :http-request="unitUpload"
                     name="pic_file_apk"
                     accept=".png,.jpg">
            <img v-if="unitUrl"
                 :src="unitUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-row class="normal-row">
        <el-button class="save-btn"
                   @click="back()">返回</el-button>
        <el-button @click="saveData('formInline')"
                   type="primary"
                   class="save-btn">保存</el-button>
      </el-row>
    </div>
  </div>
</template>
<script>
import { addUnitApi } from "@/services/orgainzeManage"
import axios from 'axios'
import qs from 'qs'
export default {
  data () {
    var checkName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入单位名称'));
      } else if ((/^[\s　]|[ ]$/gi).test(value)) {
        callback(new Error('请输入正确的单位名称！'));
      }
      else {
        callback();
      }
    };
    var checkNickName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入单位简称'));
      } else if ((/^[\s　]|[ ]$/gi).test(value)) {
        callback(new Error('请输入正确的单位简称！'));
      }
      else {
        callback();
      }
    };
    var checkUnitType = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择单位类型'));
      } else {
        callback();
      }
    };
    var checkDomain = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入域名'));
      } else if ((/^[\s　]|[ ]$/gi).test(value)) {
        callback(new Error('请输入正确的域名！'));
      }
      else {
        callback();
      }
    };
    var checkAddress = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入地址'));
      } else if ((/^[\s　]|[ ]$/gi).test(value)) {
        callback(new Error('请输入具体地址！'));
      }
      else {
        callback();
      }
    };
    return {
      businessType: [{
        value: '1',
        name: '监管'
      }, {
        value: '2',
        name: '建设'
      },
      {
        value: '3',
        name: '建设主管部门'
      }],
      superviseArr: [{
        value: 1,
        name: '省级'
      }, {
        value: 2,
        name: '市级'
      }, {
        value: 3,
        name: '县级'
      }],
      address: "",
      formInline: {
        platform_name: '',//平台页面名称
        login_name: '',//登录页名称
        show_logo_status: 1,//logo是否显示
        regulatory_level: '', //监管级别
        company_business_type: '',  //业务类型
        unitType: "",
        name: "",
        nick_name: "",
        domain_name: "",
        logo: "",
        province: "",
        province_name: "",
        city: "",
        city_name: "",
        district: "",
        district_name: "",
        address: "",
        email: "",
        lead: "",
        lead_phone: "",
        legal_person: "",
        certificates_type: "",
        certificates_num: "",
        license_img: "",
        license_num: "",
        image_picture: "",
        company_type: ""
      },
      unitTypeArr: [],
      imageUrl: '',//单位logo的图片
      logoPath: "",//存储传给后台的logo图片地址
      homeImageUrl: '',//上传首页图片展示地址
      homeImagePath: '',//上传首页图片给后台的地址
      unitUrl: "",//营业执照的图片
      unitPath: "",//存储传给后台的营业执照的图片地址
      province: [],//省下拉框数据
      city: [],//市下拉框数据
      district: [],//区下拉框数据
      cardData: [],//证件类型数据
      value: "",
      rules: {
        name: [
          { required: true, validator: checkName, trigger: 'change' },
        ],
        nick_name: [
          { required: true, validator: checkNickName, trigger: 'change' },
        ],
        company_type: [
          { required: true, validator: checkUnitType, trigger: 'change' },
        ],
        domain_name: [
          { required: true, validator: checkDomain, trigger: 'change' },
        ],
        province: [
          { required: true, message: '请选择省', trigger: 'change' },
        ],
        city: [
          { required: true, message: '请选择市', trigger: 'change' },
        ],
        district: [
          { required: true, message: '请选择区', trigger: 'change' },
        ],
        address: [
          { required: true, validator: checkAddress, trigger: 'change' },
        ],
        company_business_type: [
          { required: true, message: '请选择业务类型', trigger: 'change' },
        ],
      }
    }
  },
  methods: {
    //获取单位类型下拉列表数据
    getCodeList () {
      addUnitApi.getCodeList({
        params: {
          code_type: 'companyType',
          is_page: 0
        }
      }).then((res) => {
        this.unitTypeArr = res.data.list;
        console.log('res-新增-单位类型标准码=', res, 'unitTypeArr=', this.unitTypeArr)
      }).catch((error) => {
        console.log(error)
      })
    },
    //单位类型
    onChangeType (val) {
      this.formInline.company_type = val;
      console.log('单位类型=', val)
    },
    //单位logo上传成功的钩子
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    //上传首页图片
    uploadHomeFile (params) {
      var moduleName = 'company';
      var formData = new FormData();
      formData.append("pic_file_apk[]", params.file);
      formData.append("module", moduleName);
      addUnitApi.uploadFile(
        { data: formData }
      ).then(res => {
        this.homeImageUrl = res.data.upload_success[0].absolute_url
        this.homeImagePath = res.data.upload_success[0].relative_url
      }, err => {
        console.log(err)
      })
    },
    //上传首页图片成功的钩子
    handleAvatarHomeSuccess (res, file) {
      this.homeImageUrl = URL.createObjectURL(file.raw);
    },




    //获取省列表数据
    getProvince () {
      addUnitApi.getProvince({
        params: {
          area_type: '1'
        }
      }).then(res => {
        this.province = res.data
      }, err => {
        console.log(err)
      })
    },
    //获取市列表接口
    getCity (data) {
      this.formInline.city = ""
      this.formInline.district = ""
      addUnitApi.getCity({
        params: {
          area_type: '2',
          province_no: data
        }
      }).then(res => {
        this.city = res.data
        let obj = {};
        obj = this.province.find((item) => {//这里的userList就是上面遍历的数据源
          return item.province_no === data;//筛选出匹配数据
        });
        this.formInline.province_name = obj.province
      }, err => {
        console.log(err)
      }, err => {
        console.log(err)
      })
    },
    //获取区列表接口
    getArea (data) {
      this.formInline.district = ""
      addUnitApi.getArea({
        params: {
          area_type: '3',
          city_no: data
        }
      }).then(res => {
        this.district = res.data
        let obj = {};
        obj = this.city.find((item) => {//这里的userList就是上面遍历的数据源
          return item.city_no === data;//筛选出匹配数据
        });
        this.formInline.city_name = obj.city
      }, err => {
        console.log(err)
      }, err => {
        console.log(err)
      })
    },
    //改变区的数据
    changeArea (data) {
      let obj = {};
      obj = this.district.find((item) => {//这里的userList就是上面遍历的数据源
        return item.area_no === data;//筛选出匹配数据
      });
      this.formInline.district_name = obj.area
    },
    //获取证件类型
    getCard () {
      addUnitApi.getCard({
        params: {
          code_type: 'legalCardType',
          is_page: '0'
        }
      }).then(res => {
        this.cardData = res.data.list
      }, err => {
        console.log(err)
      })
    },
    //上传单位logo功能
    uploadFile (params) {
      var moduleName = 'company'
      var formData = new FormData();
      formData.append("pic_file_apk[]", params.file);
      formData.append("module", moduleName);
      addUnitApi.uploadFile(
        { data: formData }
      ).then(res => {
        this.imageUrl = res.data.upload_success[0].absolute_url
        this.logoPath = res.data.upload_success[0].relative_url
      }, err => {
        console.log(err)
      })
    },
    //上传营业执照的成功钩子
    unitAvatarSuccess (res, file) {
      this.unitUrl = URL.createObjectURL(file.raw);
    },
    //上传营业执照功能
    unitUpload (params) {
      var moduleName = 'company'
      var formData = new FormData();
      formData.append("pic_file_apk[]", params.file);
      formData.append("module", moduleName);
      addUnitApi.uploadFile(
        { data: formData }
      ).then(res => {
        this.unitUrl = res.data.upload_success[0].absolute_url
        this.unitPath = res.data.upload_success[0].relative_url
      }, err => {
        console.log(err)
      })
    },
    //保存按钮
    saveData (formInline) {
      this.formInline.create_id = localStorage.getItem('user_id')
      this.formInline.logo = this.logoPath
      this.formInline.license_img = this.unitPath
      this.formInline.image_picture = this.homeImagePath
      this.$refs[formInline].validate((valid) => {
        if (valid) {
          addUnitApi.sureaddUnit({
            data: this.formInline
          }).then(res => {
            if (res.msg == 'SUCCESS') {
              this.$message.success("添加成功！");
              this.$router.push('./UnitManage')
            }
          }, err => {
            console.log(err)
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //返回按钮
    back () {
      this.$router.push('./UnitManage')
    }
  },
  created () {
    this.getCodeList();
    this.getProvince()
    this.getCard()
  }
}
</script>
<style scoped lang="scss">
/deep/ #unitType .el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 100%;
  width: 300px !important;
}
.addUnit {
  background: #fff;
}
.addUnit_main {
  padding: 20px 60px;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader /deep/ .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.principal /deep/ .el-form-item__label {
  /* padding-right:0px; */
  margin-left: -14px;
}
.Credit_Code /deep/ .el-form-item__label {
  /* padding-right:0px; */
  margin-left: -56px;
}

.addPadding /deep/ .el-form-item__label {
  padding-left: 10px;
}
.name-input {
  width: 300px;
}
.domain-input {
  width: 680px;
}
.unit {
  width: 100%;
}
.address-select {
  width: 150px;
}
.address-input {
  width: 190px;
}

.lead-input {
  width: 290px;
}
.phone-input {
  width: 293px;
}
.num-input {
  width: 305px;
}
.normal-row {
  width: 50%;
  text-align: center;
}
.nick-item {
  display: block;
  .el-select {
    width: 139%;
  }
}
</style>
